<template>
	<div class="web">
		<nnav></nnav>
		<div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide tu"><img src="../../img/fate.jpg"/></div>
	            <div class="swiper-slide tu"><img src="../../img/fate.jpg"/></div>
	            <div class="swiper-slide tu"><img src="../../img/fate.jpg"/></div>
	            <div class="swiper-slide tu"><img src="../../img/fate.jpg"/></div>
	        </div>
	        <div class="swiper-pagination swiper-pagination-white"></div>
	    </div>
	    <div class="homepage">
			<a href="#">
				<div v-for="(item,index) in shou" class="homepagebox">
					<p><img :src="item.pic"/></p>
					<p>{{item.title}}</p>
				</div>
				<div class="clear"></div>
			</a>
		</div>
		<router-view></router-view>
	</div>
	
</template>

<script>
	import Swiper from 'swiper';
	import 'swiper/dist/css/swiper.min.css';
	import CONFIG from "@/config";
	import axios from 'axios';
	import nnav from 'components/nav/nav'
	export default{
		props: ['listImg'],
		mounted(){
			console.log('mounted', this)
            var swiper = new Swiper('.swiper-container', {
                autoplay:true,
                loop:true,
                pagination: {
			      el: '.swiper-pagination',
			    },
            });
            this.shouye();
        },
		data(){
			return {
				shou:[]
			}
		},
		methods:{
			shouye(){
				var url = CONFIG.domain+"/shouye";				
				console.log(axios);
				axios.get(url).then((res)=>{
					console.log(this);
					this.shou=res.data.data.list;
				})
			},
		},
		components:{
			nnav
		}
	}
</script>

<style lang="scss">
	@import "../../common/scss/lunbotu.scss";
.homepage{
    width: 90%;
    margin: 0 auto;
}
.homepagebox{
    width: 47%;
    display: inline-block;
    float: left;
    margin-bottom: 20px;
    margin-right: 16px;
}
.homepagebox:nth-child(2n){
    margin-right: auto;
}
.homepagebox p img{
    width: 100%;
    border-radius: 8px;
}
.homepagebox p:nth-child(2){
    font-size: 13px;
    color: gray;
}
</style>